<template>
  <div>
    <h1 id="title">住房出租</h1>
    <el-form-item label=" 姓 名 " class="input1">
      <el-input v-model="name"></el-input>
    </el-form-item>
    <el-form-item label=" 地 址 " class="input2">
      <el-input v-model="place"></el-input>
    </el-form-item>
    <el-form-item label="面积/方" class="input2">
    <el-input v-model="area"></el-input>
  </el-form-item>
    <el-form-item label="微 信 号" class="input2">
      <el-input v-model="vx"></el-input>
    </el-form-item>
    <el-form-item label="价格/月" class="input2">
      <el-input v-model="price"></el-input>
    </el-form-item>
    <el-form-item label="详细描述" class="input4">
      <el-input type="textarea" v-model="description"></el-input>
    </el-form-item>
    <el-form-item label="房屋图片" prop="img">
      <input
          type="file"
          id="idc"
          name="image"
          class="getImgUrl"
          @change="shan($event)"
          accept="image/jpg, image/jpeg, image/png"
      />
    </el-form-item>
    <el-button class="input3" type="primary" @click="shangch($event)">提交</el-button>
    <el-dialog v-model="orderInfo1" title="历史订单信息查看" :before-close="close1" class="dialog1">
      <el-button @click="close1()">关闭</el-button>
    </el-dialog>
  </div>

</template>


<script>
import request from "@/utils/request";
import router from "@/router";

export default {
  name: "ShoppingCar",
  data(){
    return{
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      tableData:[
      ],
      checked: true,
      readorder:false,
      goods: {},
      user: {},
      allPrice: 0,
      name:'',
      place:'',
      area:'',
      vx:'',
      price:'',
      description:'',
    }
  },

  methods:{
    shangch(e) {
      let files = document.getElementById("idc").files[0];
      let name = document.getElementById("idc").files[0].name;
      // this.picPath=document.getElementById("idc").value

      let arr = name.split(".");
      let fileSize = 0;
      let fileMaxSize = 10240; //1M
      if (files) {
        fileSize = files.size;
        if (fileSize > 10 * 1024 * 1024) {
          alert("文件大小不能大于10M！");
          file.value = "";
          return false;
        } else if (fileSize <= 0) {
          alert("文件大小不能为0M！");
          file.value = "";
          return false;
        }
      } else {
        return false;
      }
      //转码base64
      let reader = new FileReader();
      let imgFile;
      // let that = this
      reader.readAsDataURL(files);
      reader.onload = async e => {
        imgFile = e.target.result;
        let arr = imgFile.split(",");
        this.faceBase64 = arr[1];
        this.picPath='data:image/jpg;base64,'+arr[1]
        console.log(imgFile)
        request.post("http://localhost:8082/user/rent?name="+this.name+"&place="+this.place+"&area="+this.area+
            "&vx="+this.vx+"&price="+this.price+"&description="+this.description+"&img="+imgFile).then((res) => {
          if (res.flag) {
            this.$message({
              type: 'success',
              message: res.msg
            })
          }
          else {
            this.$message.error(res.msg);
          }
        });
        console.log('111',this.Data1);
      };
  },

    //   rent(){
    //   request.post("http://localhost:8082/user/rent?name="+this.name+"&place="+this.place+"&area="+this.area+
    //   "&vx="+this.vx+"&price="+this.price+"&description="+this.description+"&img="+this.img).then(res =>{
    //     if (res.flag) {
    //       console.log("s",this.img)
    //       this.$message({
    //         type: 'success',
    //         message: res.msg
    //       })
    //     }
    //     else {
    //       this.$message.error(res.msg);
    //     }
    //   })
    // },
    handleExceed(files, uploadFiles) {
      ElMessage.warning(
          `只能上传${files.length}张图片`
      )
    },
    getShoppingcart() {
      request.get("http://localhost:8082/ShoppingCart/showUserShoppingCart").then(res => {
        if (res.flag) {
          this.tableData = res.data['cars']
          this.user = res.data['user']
          for (let val in res.data['cars']) {
            console.log(res.data['cars'].num)
            if (val.selected == 1) {
              val.itemCheck = true
            }
            // }else {
            //   val.itemCheck = false
            // }
          }
          this.tableData = this.tableData || [];
          this.$message({
            type: 'success',
            message: res.msg
          });
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    //数量
    Comfirmnum(row){
      request.post("http://localhost:8082/ShoppingCart/setBuyNum?id="+row.goods.id+"&userid="+this.user.id+"&num="+this.num).then(res => {
    })
    },

    Delete(row){
      request.delete("http://localhost:8082/ShoppingCart/RemoveFromShoppingCart?id="+row.goods.id).then(res => {
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    redirectToRent() {
      router.push({path: '/UserRent'});
    },
    toggleCheck(row){
      if(row.itemCheck){
        this.allPrice = this.allPrice + row.goods.price * row.num
      }
      else {
        this.allPrice = this.allPrice - row.goods.price * row.num
      }

    }
  },
  created(){
    this.getShoppingcart()
  },
  ShowCar(data){
    this.goods = data.goods
    this.readorder=true;
  },
  close1() {
    this.readorder = false;
  },

}


</script>

<style scoped>
.input1{
  margin-top:50px;
  margin-left:10px;
  width: 350px;
}
.input2{
  margin-top:20px;
  margin-left:10px;
  width: 350px;
}
.input3{
  margin-top:20px;
  margin-left:10px;
}
.input4{
  margin-top:20px;
  margin-left:10px;
  width: 370px;
}
.getImgUrl{
  margin-left: 10px;
}
</style>
